import React from 'react'

const Login: React.FC = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 via-sky-50 to-cream-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        {/* Logo */}
        <div className="text-center mb-8">
          <div className="w-20 h-20 bg-gradient-to-br from-primary-400 to-primary-600 rounded-3xl flex items-center justify-center mx-auto mb-4 shadow-lg">
            <svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
          </div>
          <h1 className="text-3xl font-bold text-primary-800 mb-2">欢迎回来</h1>
          <p className="text-primary-600">登录绘本岛，开启阅读之旅</p>
        </div>

        {/* 登录表单 */}
        <div className="bg-white rounded-3xl shadow-xl p-8">
          <form className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                手机号
              </label>
              <input
                type="tel"
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-2xl focus:border-primary-300 focus:outline-none transition-colors"
                placeholder="请输入手机号"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                密码
              </label>
              <input
                type="password"
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-2xl focus:border-primary-300 focus:outline-none transition-colors"
                placeholder="请输入密码"
              />
            </div>

            <div className="flex items-center justify-between">
              <label className="flex items-center">
                <input type="checkbox" className="rounded border-gray-300 text-primary-600 focus:ring-primary-500" />
                <span className="ml-2 text-sm text-gray-600">记住我</span>
              </label>
              <a href="#" className="text-sm text-primary-600 hover:text-primary-700">
                忘记密码？
              </a>
            </div>

            <button
              type="submit"
              className="w-full py-3 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-2xl hover:from-primary-600 hover:to-primary-700 transition-all duration-200 font-medium shadow-lg hover:shadow-xl"
            >
              登录
            </button>
          </form>

          {/* 分割线 */}
          <div className="relative my-6">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-gray-200"></div>
            </div>
            <div className="relative flex justify-center text-sm">
              <span className="px-4 bg-white text-gray-500">或者</span>
            </div>
          </div>

          {/* 其他登录方式 */}
          <div className="space-y-3">
            <button className="w-full flex items-center justify-center py-3 border-2 border-gray-200 rounded-2xl hover:border-primary-200 transition-colors">
              <svg className="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="#07C160">
                <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.181-.62-.29-1.271-.29-1.94 0-3.581 3.068-6.494 6.859-6.494 1.64 0 3.131.547 4.345 1.455l.998-.77c.168-.13.389-.14.568-.03a.643.643 0 0 1 .313.53c0 .163-.07.327-.188.448l-1.554 1.395a.864.864 0 0 0-.216.664c0 .389.314.703.703.703.187 0 .36-.074.49-.204l1.512-1.523a.888.888 0 0 1 .633-.26c.337 0 .637.163.826.414.188.25.24.57.13.867l-.635 1.607a.289.289 0 0 0 .067.329c.11.11.29.11.4 0l1.478-1.316a.864.864 0 0 1 .717-.098 10.164 10.164 0 0 0 2.106.221c3.196 0 5.835-1.779 5.835-3.961 0-2.182-2.639-3.96-5.835-3.96-1.905 0-3.573.78-4.58 1.948a6.426 6.426 0 0 0-4.345-1.455c-3.79 0-6.858 2.913-6.858 6.494 0 .67.108 1.32.29 1.94.544-.026 1.096-.05 1.663-.05.389 0 .703.314.703.703 0 .389-.314.703-.703.703-1.41 0-2.812.04-4.19.117 2.24 2.24 5.14 3.61 8.285 3.61 3.79 0 6.859-2.913 6.859-6.494 0-2.182-2.64-3.961-5.835-3.961z"/>
              </svg>
              微信登录
            </button>
            
            <div className="text-center text-sm text-gray-600">
              还没有账号？
              <a href="/register" className="text-primary-600 hover:text-primary-700 font-medium">
                立即注册
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Login